import {TableAction} from "@/component/Mine/AdminConsole/DataControl/style";
import React from "react";
import {Image, Modal, Popover, Tooltip} from "antd";
import _ from "lodash";
import {toThousands} from "@/util/global";
import {delArticle} from "@/api/artArticleInfo";
import store from "@/store";
import {actions} from "@/store/home/Article";
import unknown from '@/static/unknown.png';
import HtmlPreview from "@/util/HtmlPreview";
import BraftEditor from "braft-editor";
import Config from "@/config";
import {Link} from "react-router-dom";
import moment from "moment";
import {CloseCircleFilled, CloseOutlined, DownloadOutlined, EditOutlined} from '@ant-design/icons';
import {toBase64} from "@/util/CodeUtils";
import {DeepFontColor, Red, SuperLightFontColor} from "@/style/Color";
import {JVip} from "@/common/Icon/Vip";

/**
 * 游戏后台管理列表
 */
export const gameListCol = (that) => {
    return [
        {
            title: '封面图',
            align: 'center',
            fixed: 'left',
            dataIndex: "images",
            width: 60,
            render: (url, record, index) =>
                <>
                    <Image
                        style={{float: 'left'}}
                        width={60}
                        height={60}
                        src={!url ? 'error' : url}
                        fallback={unknown}
                    />
                </>,
        },
        {
            title: '中文名称',
            align: 'center',
            dataIndex: 'cnName',
            key: 'cnName',
            width: 150,
            search: true,
            render: (text, record, index) => {
                return <Popover
                    content={
                        <>
                            <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text ? text : ''}</p>
                        </>
                    }
                    overlayStyle={{position: "fixed"}}
                    destroyTooltipOnHide={true}>
                    <span
                        style={{float: 'left'}}>{text ? text.length > 25 ? text.substring(0, 16) + "......" : text : ''}</span>
                </Popover>
            }
        },
        {
            title: '英文名称',
            align: 'center',
            dataIndex: 'enName',
            key: 'enName',
            width: 150,
            search: true,
            render: (text, record, index) => {
                return <Popover
                    content={
                        <>
                            <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text ? text : ''}</p>
                        </>
                    }
                    overlayStyle={{position: "fixed"}}
                    destroyTooltipOnHide={true}>
                    <span
                        style={{float: 'left'}}>{text ? text.length > 16 ? text.substring(0, 16) + "......" : text : ''}</span>
                </Popover>
            }
        },
        {
            title: '描述',
            align: 'center',
            dataIndex: "desc",
            width: 100,
            render: (text, record, index) =>
                <>
                    <label onClick={() => HtmlPreview(BraftEditor.createEditorState(text))}>点击预览</label>
                </>,
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 80,
            render: (text, record, index) =>
                <>
                    <TableAction
                        style={{float: 'left'}}
                        className={"edit"}
                        onClick={() => that.handleClickEdit(record)}
                    >
                        <EditOutlined/>
                    </TableAction>
                    <TableAction
                        style={{float: 'left'}}
                        danger
                        className={'delete'}
                        onClick={() => that.handleShowConfirm(record.id)}
                    >
                        <CloseCircleFilled/>
                    </TableAction>

                </>,
        }
    ]
};

/**
 * 文章类型
 */
export const pageCategoryCol = (that) => {
    console.log(that.form);
    return [
        {
            title: '名称',
            align: 'center',
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
            width: 100,
            search: true,
        },
        {
            title: '别名',
            align: 'center',
            dataIndex: 'otherName',
            key: 'other_name',
            search: true,
        },
        {
            title: '描述',
            dataIndex: "description",
        },
        {
            title: '图片',
            align: 'center',
            dataIndex: "imageUrl",
            render: (url, record, index) =>
                <>
                    <Image
                        width={60}
                        height={60}
                        src={!url ? 'error' : url}
                        fallback={unknown}
                    />
                </>,
        },
        {
            title: '备注',
            align: 'center',
            dataIndex: "remark",
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 150,
            render: (text, record, index) =>
                <>
                    <TableAction
                        className={"edit"}
                        onClick={() => that.handleClickEdit(record)}
                    >
                        <EditOutlined/>
                    </TableAction>
                    <TableAction
                        danger
                        className={'delete'}
                        onClick={() => that.handleShowConfirm(record.id)}
                    >
                        <CloseCircleFilled/>
                    </TableAction>

                </>,
        }
    ]
};
/**
 * 游戏平台信息管理
 * @param that
 */
export const gamePlatformCol = (that) => {
    return [
        {
            fixed: 'left',
            title: '名称',
            align: 'center',
            dataIndex: 'name',
            key: 'name',
            width: 120,
            search: true
        },
        {
            title: '平台版本',
            dataIndex: 'version',
            align: 'center',
            key: 'version',
            fixed: 'left',
            width: 100,
            search: true
        },
        {
            title: '其他须知',
            dataIndex: 'notice',
            align: 'center',
            key: 'notice',
            width: 120
        },
        {
            title: '描述',
            align: 'center',
            dataIndex: "description",
            render: text => {
                return <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text ? text : ''}</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <span>{text ? text.length > 25 ? text.substring(0, 25) + "......" : text : ''}</span>
                    </Popover>
                </>
            }
        },
        {
            title: 'Logo',
            align: 'center',
            dataIndex: "imageUrl",
            render: (url, record, index) =>
                <>
                    <Image
                        width={60}
                        height={60}
                        src={!url ? 'error' : url}
                        fallback={unknown}
                    />
                </>,
        },
        {
            title: '操作',
            align: 'center',
            key: 'operation',
            fixed: 'right',
            width: 150,
            render: (text, record, index) =>
                <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>编辑</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            className={"edit"}
                            onClick={() => that.handleClickEdit(record)}
                        >
                            <EditOutlined/>
                        </TableAction>
                    </Popover>
                    <Popover
                        content={
                            <>
                                <p style={{width: 'auto', maxWidth: '300px', fontSize: '8px'}}>删除</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            danger
                            className={'delete'}
                            onClick={() => that.handleShowConfirm(record.id)}
                        >
                            <CloseCircleFilled/>
                        </TableAction>
                    </Popover>
                </>,
        }
    ]
};

/**
 * 游戏厂商、工作室信息管理
 * @param that
 */
export const gameCompanyCol = (that) => {
    return [
        {
            fixed: 'left',
            title: '名称',
            align: 'center',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            search: true
        },
        {
            title: '描述',
            dataIndex: "description",
            render: text => {
                return <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text ? text : ''}</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <span>{text ? text.length > 25 ? text.substring(0, 25) + "......" : text : ''}</span>
                    </Popover>
                </>
            }
        },
        {
            title: 'Logo',
            align: 'center',
            dataIndex: "imageUrl",
            render: (url, record, index) =>
                <>
                    <Image
                        width={60}
                        height={60}
                        src={!url ? 'error' : url}
                        fallback={unknown}
                    />
                </>,
        },
        {
            title: '操作',
            align: 'center',
            key: 'operation',
            fixed: 'right',
            width: 150,
            render: (text, record, index) =>
                <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>编辑</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            className={"edit"}
                            onClick={() => that.handleClickEdit(record)}
                        >
                            <EditOutlined/>
                        </TableAction>
                    </Popover>
                    <Popover
                        content={
                            <>
                                <p style={{width: 'auto', maxWidth: '300px', fontSize: '8px'}}>删除</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            danger
                            className={'delete'}
                            onClick={() => that.handleShowConfirm(record.id)}
                        >
                            <CloseCircleFilled/>
                        </TableAction>
                    </Popover>
                </>,
        }
    ]
};
export const homeBannerCol = (that) => {
    return [
        {
            fixed: 'left',
            title: '名称',
            align: 'center',
            dataIndex: 'title',
            key: 'title',
            width: 100,
            search: true
        },
        {
            fixed: 'left',
            title: '内容描述',
            align: 'center',
            key: 'description',
            width: 100,
        },
        {
            title: '封面图',
            dataIndex: "coverFile",
            align: 'center',
            width: 150,
            render:(record) => {
                return <img src={record} alt="" style={{width:'56px',height:'56px',borderRadius:'50%'}}/>
            }
        },
    ]
}
/**
 * 首页配置
 */
export const homeIndexColumns = (that) => {

    return [
        {
            fixed: 'left',
            title: '名称',
            align: 'center',
            dataIndex: 'title',
            key: 'title',
            width: 100,
            search: true
        },
        {
            title: '跳转路径',
            align: 'center',
            dataIndex: 'linkPath',
            key: 'linkPath',
            search: true,
            render: text => {
                return text ? <Link to={text}>{text}</Link> : null
            }
        },
        {
            title: '描述',
            dataIndex: "desc",
            render: text => {
                return <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text}</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <span>{text.length > 25 ? text.substring(0, 25) + "......" : text}</span>
                    </Popover>
                </>
            }
        },
        {
            title: '图标',
            align: 'center',
            dataIndex: "logoType",
            render: (type, record, index) =>
                <>
                    <Config.IconFont type={type}/>
                </>,
        },
        {
            title: '操作',
            align: 'center',
            key: 'operation',
            fixed: 'right',
            width: 150,
            render: (text, record, index) =>
                <>
                    <Tooltip placement="top" color={"#ffffff"}
                             title={<span style={{fontSize: '12px', color: DeepFontColor}}>修改</span>}>
                        <TableAction
                            className={"edit"}
                            onClick={() => that.handleClickEdit(record)}
                        >
                            <EditOutlined/>
                        </TableAction>
                    </Tooltip>
                    <Tooltip placement="top" color={"#ffffff"}
                             title={<span style={{fontSize: '12px', color: DeepFontColor}}>删除</span>}>
                        <TableAction
                            style={{backgroundColor: Red, borderColor: 'none'}}
                            className={'delete'}
                            onClick={() => that.handleClickDelete(record.id)}
                        >
                            <CloseOutlined style={{color: SuperLightFontColor}}/>
                        </TableAction>
                    </Tooltip>
                </>,
        }
    ]
};

/**
 * 游戏类型
 */
export const gameTypeCol = (that) => {

    return [
        {
            fixed: 'left',
            title: '名称',
            align: 'center',
            dataIndex: 'chineseName',
            key: 'chineseName',
            width: 100,
            search: true
        },
        {
            title: '(英)Name',
            align: 'center',
            dataIndex: 'englishName',
            key: 'englishName',
            search: true
        },
        {
            title: '描述',
            dataIndex: "desc",
            render: text => {
                return <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>{text}</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <span>{text.length > 25 ? text.substring(0, 25) + "......" : text}</span>
                    </Popover>
                </>
            }
        },
        {
            title: '图标',
            align: 'center',
            dataIndex: "logoType",
            render: (type, record, index) =>
                <>
                    <Config.IconFont type={type}/>
                </>,
        },
        {
            title: '操作',
            align: 'center',
            key: 'operation',
            fixed: 'right',
            width: 150,
            render: (text, record, index) =>
                <>
                    <Popover
                        content={
                            <>
                                <p style={{'width': 'auto', maxWidth: '300px', fontSize: '8px'}}>编辑</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            className={"edit"}
                            onClick={() => that.handleClickEdit(record)}
                        >
                            <EditOutlined/>
                        </TableAction>
                    </Popover>
                    <Popover
                        content={
                            <>
                                <p style={{width: 'auto', maxWidth: '300px', fontSize: '8px'}}>删除</p>
                            </>
                        }
                        overlayStyle={{position: "fixed"}}
                        destroyTooltipOnHide={true}>
                        <TableAction
                            danger
                            className={'delete'}
                            onClick={() => that.handleShowConfirm(record.id)}
                        >
                            <CloseCircleFilled/>
                        </TableAction>
                    </Popover>
                </>,
        }
    ]
};

/**
 * 用户列表
 */
export const userListCol = (that) => ([
    {
        title: '昵称',
        dataIndex: 'onlineName',
        key: 'onlineName',
    },
    {
        title: '身份',
        key: 'isAdmin',
        dataIndex: 'isAdmin',
        render: (text, record, index) => {
            return (
                <>
                    {
                        that.userIdentity(record.isAdmin)
                    }
                </>
            )
        }
    },
    {
        title: '会员',
        key: 'vipType',
        dataIndex: 'vipType',
        render: (text, record, index) => {
            return (
                <>
                    <JVip vipType={record.vipType}/>
                </>
            )
        }
    },
    {
        title: 'JCoins余额',
        key: 'jcoins',
        dataIndex: 'jcoins'
    },
    {
        title: '性别',
        key: 'sex',
        dataIndex: 'sex',
        render: (text, record, index) => {
            return (
                <>
                    {
                        that.userSexTag(record.sex)
                    }
                </>
            )
        }
    },
    {
        title: '账户状态',
        key: 'status',
        dataIndex: 'statusId',
        render: (text, record, index) => {
            return (
                <>
                    {
                        that.userStatusTag(record.statusId)
                    }
                </>
            )
        }
    }, {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 180,
        render: (text, record, index) =>
            <>
                <TableAction>详情</TableAction>
                <Popover
                    content={that.tableActionContent(record)}
                    placement="rightTop"
                    trigger="focus">
                    <TableAction>操作</TableAction>
                </Popover>
            </>,
    },

])

/**
 * 文章列表
 */
export const articleListCol = () => {
    const {confirm} = Modal;

    function viewDetail(id) {
        window._ROUTER_.push(`/p?pid=${id}`);
    }

    function handleDeleteArticle(record) {
        confirm({
            content: <>
                <span>确定要删除该条数据吗？</span>
            </>,
            onOk() {
                /* 删除文章 */
                delArticle({id: record.id}).then(res => {
                    console.log(res);
                    store.dispatch(actions.SagaQuery());
                }).catch(err => {
                    console.log(err);
                })

            },
            onCancel() {

            }
        })
    }

    return ([
        {
            title: '标题',
            dataIndex: 'pageTitle',
            key: 'pageTitle',
            className: 'article-title',
            width: 250,
            onCell(record, rowIndex) {
                // 标题列文字内容长度处理
                let rec = _.clone(record)
                let returnTitle = rec.pageTitle.replaceAll(" ", "");
                if (returnTitle.length > 15) {
                    record.pageTitle = returnTitle.substring(0, 14) + " . . . "
                }
            }
        },
        {
            title: '字数',
            dataIndex: 'fontSize',
            className: 'article-font-length',
            onCell(record, rowIndex) {
                let rec = _.clone(record)
                record.fontSize = toThousands(rec.fontSize);
            }
        },
        {
            title: '浏览量',
            dataIndex: "watchCount",
            onCell(record, rowIndex) {
                let rec = _.clone(record)
                record.watchCount = toThousands(rec.watchCount);
            }
        },
        {
            title: '点赞量',
            dataIndex: "likeCount",
            onCell(record, rowIndex) {
                let rec = _.clone(record)
                record.likeCount = toThousands(rec.likeCount);
            }
        },
        {
            title: '分享量',
            dataIndex: "shareCount",
            onCell(record, rowIndex) {
                let rec = _.clone(record)
                record.shareCount = toThousands(rec.shareCount);
            }
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 170,
            render: (text, record, index) =>
                <>
                    <TableAction onClick={() => viewDetail(record.id)}>详情</TableAction>
                    <TableAction className={'delete'} onClick={() => handleDeleteArticle(record)}>删除</TableAction>
                </>,
        }

    ])
}

/**
 * 已购游戏
 */
export const userGamePurchased = () => {
    return ([
        // {
        //     title: '',
        //     dataIndex: "gameImage",
        //     align: 'center',
        //     width: 150,
        //     render:(record) => {
        //         return <img src={record} alt="" style={{width:'56px',height:'56px',borderRadius:'50%'}}/>
        //     }
        // },
        {
            title: '游戏名',
            align: 'center',
            dataIndex: 'gameName',
            key: 'gameName',
            className: 'article-title',
            width: 150,
            onCell(record, rowIndex) {
                // 标题列文字内容长度处理
                let rec = _.clone(record)
                let returnTitle = rec.gameName.replaceAll(" ", "");
                if (returnTitle.length >= 10) {
                    record.pageTitle = returnTitle.substring(0, 9) + " . . . "
                }
            },
            render: (content, record, index) => {
                return <span onClick={() => window._ROUTER_.push(`/game?id=${toBase64(record.gameId)}`)}
                             style={{cursor: 'pointer', fontSize: '13px'}}
                >
                    {content}
                </span>
            }
        },
        {
            title: '订单号',
            align: 'center',
            dataIndex: 'orderCode',
            key: 'orderCode',
            width: 240,
            render: (content, record, index) => {
                return <span style={{fontSize: '13px'}}>{content}</span>
            }
        },
        {
            title: '购买日期',
            align: 'center',
            dataIndex: 'purchaseDate',
            key: 'purchaseDate',
            width: 200,
            render: (content, record, index) => {
                return <span
                    style={{color: '#cbcbcb', fontSize: '13px'}}>{moment(content).format('yyyy/MM/DD HH:mm:ss')}</span>
            }
        },
        {
            title: '价格',
            align: 'center',
            dataIndex: 'costCoins',
            key: 'costCoins',
            width: 70,
            render: (content, record, index) => {
                return <span style={{fontSize: '13px'}}>{content}</span>
            }
        },
        {
            title: '选项',
            align: 'center',
            key: 'operation',
            fixed: 'right',
            width: 60,
            render: (content, record, index) => {
                return <DownloadOutlined style={{cursor: 'pointer', fontSize: '13px'}}/>
            }
        },

        // {
        //     title: '字数',
        //     dataIndex: 'fontSize',
        //     className: 'article-font-length',
        //     onCell(record, rowIndex) {
        //         let rec = _.clone(record)
        //         record.fontSize = toThousands(rec.fontSize);
        //     }
        // },
        // {
        //     title: '浏览量',
        //     dataIndex: "watchCount",
        //     onCell(record, rowIndex) {
        //         let rec = _.clone(record)
        //         record.watchCount = toThousands(rec.watchCount);
        //     }
        // },
        // {
        //     title: '点赞量',
        //     dataIndex: "likeCount",
        //     onCell(record, rowIndex) {
        //         let rec = _.clone(record)
        //         record.likeCount = toThousands(rec.likeCount);
        //     }
        // },
        // {
        //     title: '分享量',
        //     dataIndex: "shareCount",
        //     onCell(record, rowIndex) {
        //         let rec = _.clone(record)
        //         record.shareCount = toThousands(rec.shareCount);
        //     }
        // },
        // {
        //     title: '上传日期',
        //     dataIndex: "createDate",
        //     width: 200
        // },
        // {
        //     title: '操作',
        //     key: 'operation',
        //     fixed: 'right',
        //     width: 100,
        //     render: (text, record, index) =>
        //         <>
        //             <TableAction onClick={() => viewDetail(record.id)}>详情</TableAction>
        //             <TableAction className={'delete'} onClick={() => handleDeleteArticle(record)}>删除</TableAction>
        //         </>,
        // }

    ])
}
